<!DOCTYPE html>
  <html>
  <head>
      <meta charset="utf-8">
      <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
      <title>生意帮</title>
      <link rel="stylesheet" type="text/css" href="../../css/api.css" />
      <link rel="stylesheet" type="text/css" href="../../css/common.css" />
      <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    	<link rel="stylesheet" type="text/css" href="../../css/aui-pull-refresh.css" />
      <link rel="stylesheet" type="text/css" href="../../css/swiper.min.css">
      <style>
          html, body {width: 100%;min-height: 100%;background: #ffffff;}
          .aui-active .aui-bar-tab-label{
            color: #f5a51c
          }
          .aui-searchbar{
            background: #ffffff
          }
          .aui-searchbar-input{
            background: #ebeced
          }
          .selectBtn{
            text-align: center;
            font-size: 0.7rem
          }
          .h10{
            width: 100%;
            height: 0.5rem;
            display: -webkit-box;
            clear: both;
          }

          header,.aui-bar-nav {
          	position: fixed;
            padding-top: 0px
          }


          [v-cloak] {
              display: none;
          }
          header{
            background: url('../../image/home_bg1.png')  no-repeat bottom center !important;
            background-size: 50%;
            padding-bottom:5rem;
          }
          header .aui-tab{
            background: none
          }
          header .aui-tab-item.aui-active{
            color: #ffffff !important;
            border-bottom: 2px solid #ffffff !important;
            font-weight: 600;
          }
          header .aui-tab-item{
            color: #ffffff
          }
          .aui-bar-nav.aui-bar-light .aui-iconfont{
            color: #ffffff
          }
          .swiper-container {
      width: 100%;
      height: 2rem;
      position: relative;
      overflow: hidden;

    }
    .swiper-slide {
      text-align: center;
      font-size: 0.7rem;
      /* Center slide text vertically */

      color: #ffffff
    }
    .swiper-slide-active{
      border-bottom: 2px solid #ffffff;
      font-weight: 800;
    }

      </style>
  </head>
  <body>
<div id="app" >


  <header id="header_top" class="aui-bar aui-bar-nav aui-bar-light" style="">

    <a class="aui-pull-left">
        <span class="aui-iconfont aui-icon-search"></span>
    </a>

      <div class="aui-title">

        <!--标签-->
        <div class="aui-tab" id="tab">
            <div class="aui-tab-item aui-active">买赠区</div>
            <div class="aui-tab-item"><div></div>分销区</div>

        </div>

      </div>

      <a class="aui-pull-right">
          <span class="aui-iconfont aui-icon-edit"></span>
      </a>

      <div class="h10" >

      </div>
    <!--搜索-->



    <!--标签-->

      <div class="aui-content" style="width:100%;overflow: hidden;position: absolute; ">

        <!-- Swiper -->
<div class="swiper-container">
  <div class="swiper-wrapper" >
    <div class="swiper-slide" onclick="setClassSub(0)">全部</div>
    <div class="swiper-slide" onclick="setClassSub(1)">推荐</div>
    <div class="swiper-slide" onclick="setClassSub(2)">日用</div>
    <div class="swiper-slide" onclick="setClassSub(3)">电器</div>
    <div class="swiper-slide" onclick="setClassSub(4)">数码</div>
    <div class="swiper-slide" onclick="setClassSub(5)">个护</div>
    <div class="swiper-slide" onclick="setClassSub(6)">首饰</div>


  </div>


</div>


      </div>
  </header>



</div>
  </body>
  <script type="text/javascript" src="../../script/api.js"></script>
  <script type="text/javascript" src="../../script/zepto.js"></script>
  <script type="text/javascript" src="../../script/vue.min.js"></script>
  <script type="text/javascript" src="../../script/utils.js"></script>
  <script type="text/javascript" src="../../script/common.js"></script>
  <script type="text/javascript" src="../../script/aui-tab.js"></script>
  <script type="text/javascript" src="../../script/aui-scroll.js"></script>
  <script type="text/javascript" src="../../script/aui-pull-refresh.js"></script>
  <script type="text/javascript" src="../../script/swiper.min.js"></script>
  <script type="text/javascript">
  var header_top = $api.byId('header_top');
  var header_topPos = $api.offset(header_top);

  var swiper = new Swiper('.swiper-container', {
      slidesPerView: 7,
      spaceBetween: 10,
      slidesPerGroup: 1,
      loopFillGroupWithBlank: true
    });
    function setClass(k){
      if(k == 0){

        api.openWin({
            name: 'maizengqu',
            url: './home_zeng.html',
            rect: {
                x: 0,
                y: header_topPos.h-30,
                w: 'auto',
                h: 'auto'
            },
            pageParam: {
                name: 'test'
            },
            bounces: true,
            bgColor: 'rgba(0,0,0,0)',
            vScrollBarEnabled: true,
            hScrollBarEnabled: true
        });
      }else{
        api.openFrame({
            name: 'fenxiaoqu',
            url: './home_fenxiao.html',
            rect: {
                x: 0,
                y: header_topPos.h-30,
                w: 'auto',
                h: 'auto'
            },
            pageParam: {
                name: 'test'
            },
            bounces: true,
            bgColor: 'rgba(0,0,0,0)',
            vScrollBarEnabled: true,
            hScrollBarEnabled: true
        });
      }

    }

      apiready = function(){

        setClass(0)

        $api.fixStatusBar(header_top);

        api.parseTapmode();


      };

      //刷新
      function setRefresh() {
          var pullRefresh = new auiPullToRefresh({
              container: document.querySelector('.aui-refresh-content'),
              triggerDistance: 100
          }, function(ret) {

              if (ret.status == "success") {
                  setTimeout(function() {
                      pullRefresh.cancelLoading(); //刷新成功后调用此方法隐藏
                  }, 1500)
              }
          })
      }

      function doSearch(){
          var searchValue = document.getElementById("search-input").value;
          if(searchValue){
              api.toast({
                  msg: searchValue,
                  duration: 2000,
                  location: 'bottom'
              });

          }
      }

      var tab = new auiTab({
        element:document.getElementById("tab"),
        // callback:function(o,dom){
        //     console.log(o);
        // }
    },function(ret){
        console.log(ret.index)
        if(ret.index == 1){
          $("header").css({"background":"url('../../image/home_bg1.png')  no-repeat bottom center !important","background-size":"50%"});
          api.closeWin({
              name: 'fenxiaoqu'
          });

        }else if(ret.index == 2){
          $("header").css({"background":"#ffffff"});
          api.closeWin({
              name: 'maizengqu'
          });
        }
        setClass(ret.index - 1)

    });

    function setClassSub(k){
      //swiper-container swiper-slide swiper-slide swiper-slide-active
      $(".swiper-container .swiper-slide").removeClass("swiper-slide-active");
      $(".swiper-container .swiper-slide").eq(k).addClass("swiper-slide-active");
    }


  </script>
  </html>
